<script setup lang="ts">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { UploadFilled } from "@element-plus/icons-vue";
import { UploadFile } from "element-plus";

const form = reactive({
  reason: '',
  result: '',
  analysis: ''
});
const emit = defineEmits(['submit']);
const submitForm = () => {
  if (form.reason && form.result && form.analysis) {
    // 这里可以进行表单数据的提交操作，比如发送到后端 API
    console.log('数据导入成功，数据为：', form);
    ElMessage.success('数据导入成功');
    emit('submit');
  } else {
    ElMessage.warning('请填写完整故障信息');
  }
};
const resetForm = () => {
  // 重置表单数据
  form.reason = '';
  form.result = '';
  form.analysis = '';
};

const handleUploadSuccess = (response: any, file: UploadFile) => {
  console.log('文件上传成功，响应内容:', response);
  console.log('上传的文件:', file);
  emit('submit');
};

</script>

<template>
<div class="wrapper"> <div class="form-area" style="margin-right: 10px">
    <div>手动导入</div>
    <el-form class="form" :model="form" label-width="80px">
      <el-form-item label="故障原因">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
      <el-form-item label="故障结果">
        <el-input v-model="form.result"></el-input>
      </el-form-item>
      <el-form-item label="故障分析">
        <el-input
            type="textarea"
            :rows="4"
            v-model="form.analysis"
        ></el-input>
      </el-form-item>
      <el-button style="margin-left: 80px" type="primary" @click="submitForm">提交</el-button>
      <el-button style="margin-left: 10px" @click="resetForm">重置</el-button>
    </el-form>
  </div>
  <div class="form-area">
    <div>文件导入</div>
    <el-upload style="margin: 20px 10px" drag action="" @on-change="handleUploadSuccess">
      <el-icon size="48" class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将文件拖拽到此处或者<em>点击上传</em>
      </div>
    </el-upload>
  </div>
</div>
</template>

<style scoped>
.wrapper {
  display: flex;
}
.form-area {
  flex: 1;
  padding: 8px;
  border: 1px dashed #1FC6FF;
  border-radius: 4px;
}
.form {
  margin: 8px 0;
}
</style>